<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		option: {
			type: Object,
			default: () => ({}),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		seriesColor: {
			type: String,
			default: '#1890ff',
		},
		// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
	},
	setup(props) {
		const chartRef = ref<HTMLDivElement | null>(null);
		const { setOptions, echarts, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
		onMounted(() => {
			window.addEventListener('resize', function () {
				resize();
			});
		});

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			let nameArr = props.chartData.map((item) => {
				return item.name;
			}); // 当前用量
			let value1Arr = props.chartData.map((item) => {
				return item.valueBegin;
			}); // 当前用量
			let value2Arr = props.chartData.map((item) => {
				return item.valueEnd;
			}); // 当前用量
			console.log('value1Arr', props.chartData);

			const option = reactive({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top: '4%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: nameArr,
					axisTick: { show: false },
					axisLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#7D8590',
						},
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#7D8590',
							fontSize: 12,
						},
						//rotate:30
					},
				},
				yAxis: {
					type: 'value',
					max: 100,
					splitLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
					axisTick: { show: false },
					axisLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
				},
				series: [
					{
						name: '起始soc',
						type: 'bar',
						stack: '总量',
						barWidth: 10,
						itemStyle: {
							normal: {
								color: 'transparent',
							},
						},
						// label: {
						// 	normal: {
						// 		show: true,
						// 	},
						// },
						z: 10,
						data: value1Arr,
					},
					{
						name: '终止soc',
						type: 'bar',
						stack: '总量',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: '#27ab8f',
										},
										{
											offset: 1,
											color: '#ea6f48',
										},
									],
									false
								),
								// shadowColor: '#f3faf9',
								// shadowBlur: 10
							},
						},
						// label: {
						// 	normal: {
						// 		show: true,
						// 		// position: 'inside',
						// 		// textStyle: {
						// 		// 	color: '#6601FF',
						// 		// },
						// 	},
						// },
						z: 5,
						data: value2Arr,
					},
				],
			});
			setOptions(option);
		}
		return { chartRef };
	},
});
</script>
